window.addEventListener('load' ,function(){

    
    
    var movetop = this.document.querySelector('#movetop');
    var nav = document.querySelector('.one')
    var search = document.querySelector('.search')
    var a = document.querySelectorAll('.one_two_a')
    var moon = document.querySelector('.moon')
    var background_color = document.querySelector('.background_color');
    var article = document.querySelector('article');
    var article_icon = document.querySelectorAll('.article_icon');
    var article_p = document.querySelectorAll('.article_p');
    var section = document.querySelector('section');
    var section_h3 = document.querySelector('.section_h3');
    var section_a = document.querySelectorAll('.section_a');
    var aside = document.querySelector('aside');
    var aside_h3 = document.querySelector('.aside_h3');
    var aside_li = document.querySelectorAll('.aside_rigth_li');
    var nav_copy = document.querySelector('nav');
    var nav_h3 = document.querySelector('.nav_h3');
    var nav_div = document.querySelectorAll('.nav_div');
    var div_background_color = document.querySelector('.div_background_color');
    var footer = document.querySelector('footer');
    var form = document.querySelector('form');
    var one_one = document.querySelector('.one_one');
    //回到顶部函数
    function animate(obj ,target , callback){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var step = (target - window.pageYOffset) / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (window.pageYOffset == target){
                clearInterval(obj.timer);
                if(callback){ 
                    callback();
                }
            }
            else{
                // obj.style.top = window.pageYOffset + step + 'px';
                window.scroll(0,window.pageYOffset + step);
            }
                
        },15);
    } 
    
      //回到顶部
      movetop.addEventListener('click', function(){
        animate(document,0)
    })


    //所搜框颜色变化和导航栏
    document.addEventListener('scroll' , function(){
        if(window.pageYOffset >= 84){
            movetop.style.display = 'block';
            nav.style.position = 'fixed';
            document.querySelector('.btn-style').style.color='black';
            nav.style.backgroundColor = 'white';
            nav.style.zIndex = '2';
            search.style.borderColor = 'black';
            search.style.color = 'black';
            moon.style.color = 'black';
            //黑夜导航栏
            if(moon.className === 'moon iconfont icon-taiyang'){
            // moon.style.fontSize = '37px';
                document.querySelector('.btn-style').style.color='white';
                nav.style.backgroundColor = 'rgb(21,20,33)'
                one_one.style.color = 'white';
                search.style.color = 'white';
                search.style.borderColor = 'white';
                moon.style.color = 'white';
            }

            search.addEventListener('mouseover',function(){
                search.style.color = 'white';
                search.style.backgroundColor = 'rgb(235,34,38)';
                document.querySelector('.btn-style').style.color='white'
                search.style.borderColor = 'rgb(235,34,38)';
            })
            search.addEventListener('mouseout',function(){
                if(moon.className === 'moon iconfont icon-taiyang'){
                    search.style.backgroundColor = 'rgb(21,20,33)';
                    search.style.color = 'white';
                    document.querySelector('.btn-style').style.color='black'
                    search.style.borderColor = 'white';
                }
                else{
                    search.style.backgroundColor = 'white';
                    search.style.color = 'black';
                    document.querySelector('.btn-style').style.color='black'
                    search.style.borderColor = 'black';
                }
                
            })
            for(i = 0; i < 4 ; i++){
                if(i == 0){
                    a[i].style.color = 'red';
                }
                else{
                    a[i].style.color = 'rgb(108,111,120)';
                }   
            }
        }
        else if(window.pageYOffset === 0){
            document.querySelector('.btn-style').style.color='white'
            search.style.backgroundColor = 'transparent';
            search.addEventListener('mouseover',function(){
                search.style.color = 'red';
                search.style.backgroundColor = 'white';
                search.style.borderColor = 'white';
            })
            search.addEventListener('mouseout',function(){
                search.style.color = 'white';
                search.style.backgroundColor = 'transparent';
                search.style.borderColor = 'white';
            })
        }
        else{

            movetop.style.display = 'none';
            nav.style.position = 'relative';
            nav.style.backgroundColor = 'transparent';
            nav.style.zIndex = '0';
            search.style.color = 'white';
            search.style.borderColor = 'white';
            moon.style.color = 'white';
            search.addEventListener('mouseover',function(){
                search.style.color = 'white';
                document.querySelector('.btn-style').style.color='red'
                search.style.backgroundColor = 'rgb(235,34,38)';
                search.style.borderColor = 'rgb(235,34,38)';
            })
            search.addEventListener('mouseout',function(){
                search.style.color = 'black';
                search.style.backgroundColor = 'white';
                document.querySelector('.btn-style').style.color='white'
                search.style.borderColor = 'black';
            })
            for(i = 0; i < 4 ; i++){
                a[i].style.color = 'whitesmoke';
            }
        }

        // //黑夜导航栏
        // if(moon.className === 'moon iconfont icon-taiyang'){
        //     // moon.style.fontSize = '37px'; 
        //     nav.style.backgroundColor = 'rgb(21,20,33)'
        //     one_one.style.color = 'white';
        //     search.style.color = 'white';
        //     search.style.borderColor = 'white';
        //     moon.style.color = 'white';
        // }

        if(window.pageYOffset >= 680){
            nav.style.boxShadow = '0px 1px 5px 5px rgb(211,211,211)';
        }
        else{
            nav.style.boxShadow = 'none';
        }
    })

 
    //月亮太阳变换
    moon.addEventListener('click',function(){
        if(moon.className === 'moon iconfont icon-moonyueliang'){
            document.querySelector('.btn-style').style.color='white';
            moon.style.fontSize = '37px'; 
            moon.className = 'moon iconfont icon-taiyang';
            background_color.style.backgroundColor = 'rgba(46,45,49,0.8)';
            article.style.backgroundColor = 'rgb(21,20,33)';
            section.style.backgroundColor = 'rgb(21,20,33)';
            section_h3.style.color = 'white';
            aside.style.backgroundColor = 'rgb(16,15,25)';
            aside_h3.style.color = 'rgb(238,238,238)';
            nav_copy.style.backgroundColor = 'rgb(21,20,33)';
            nav_h3.style.color = 'rgb(238,238,238)';
            div_background_color.style.backgroundColor = 'rgba(46,45,49,0.8)';
            footer.style.backgroundColor = 'rgb(16,15,25)';
            footer.children[1].style.color = 'rgb(238,238,238)';
            form.children[0].style.backgroundColor = 'rgb(21,20,33)';
            form.children[0].style.borderColor = 'rgb(45,44,56)';
            form.children[0].style.caretColor = 'rgb(194,194,194)';
            if(window.pageYOffset !== 0){
                nav.style.backgroundColor = 'rgb(21,20,33)';
                search.style.color = 'white';
                search.style.borderColor = 'white';
                moon.style.color = 'white';
                one_one.style.color = 'white';
                search.style.backgroundColor = 'rgb(21,20,33)';
            }
            for(i = 0 ; i < nav_div.length ; i++){
                nav_div[i].children[1].style.color = 'rgb(238,238,238)';
                console.log(nav_div[i].children[1]);
            }
            for(i = 0 ; i < aside_li.length ; i++){
                aside_li[i].style.backgroundColor = 'rgb(21,20,33)';
                aside_li[i].children[0].style.backgroundColor = 'rgb(16,15,25)';
                aside_li[i].children[1].style.color = 'white';
            }
            for(i = 0 ; i < section_a.length ; i++){
                section_a[i].style.color = 'white';
            }
            for(i = 0 ; i < article_icon.length ; i++){
                article_icon[i].style.backgroundColor = 'rgb(16,15,25)';
                article_p[i].style.color = 'white';
            }
            
        }
        else{
            document.querySelector('.btn-style').style.color='white';
            moon.className = 'moon iconfont icon-moonyueliang';
            moon.style.fontSize = '27px'; 
            // nav.style.backgroundColor = 'transparent';
            background_color.style.backgroundColor = 'rgba(59, 59, 68, 0.7)';
            article.style.backgroundColor = 'rgb(255,255,255)';
            section.style.backgroundColor = 'rgb(255,255,255)';
            section_h3.style.color = 'black';
            aside.style.backgroundColor = 'rgb(247,247,247)';
            aside_h3.style.color = 'rgb(45,49,61)';
            nav_copy.style.backgroundColor = 'rgb(255,255,255)';
            nav_h3.style.color = 'rgb(45,49,61)';
            div_background_color.style.backgroundColor = 'rgba(83,86,104,0.7)';
            footer.style.backgroundColor = 'rgb(248,249,250)';
            footer.children[1].style.color = 'rgb(45,49,61)';
            form.children[0].style.backgroundColor = 'rgb(255,255,255)';
            form.children[0].style.borderColor = 'rgb(238,238,238)';
            form.children[0].style.caretColor = 'rgb(119,119,119)';
            if(window.pageYOffset !== 0){
                nav.style.backgroundColor = 'rgb(255,255,255)';
                search.style.color = 'black';
                document.querySelector('.btn-style').style.color='black';
                search.style.borderColor = 'black';
                moon.style.color = 'black';
                one_one.style.color = 'black';
                search.style.backgroundColor = 'rgb(255,255,255)';
            }
            for(i = 0 ; i < nav_div.length ; i++){
                nav_div[i].children[1].style.color = 'rgb(45,49,61)';
            }
            for(i = 0 ; i < aside_li.length ; i++){
                aside_li[i].style.backgroundColor = 'rgb(255,255,255)';
                aside_li[i].children[0].style.backgroundColor = 'rgb(247,247,247)';
                aside_li[i].children[1].style.color = 'rgb(45,49,61)';
            }
            for(i = 0 ; i < section_a.length ; i++){
                section_a[i].style.color = 'rgb(45,49,61)';
            }
            for(i = 0 ; i < article_icon.length ; i++){
                article_icon[i].style.backgroundColor = 'rgb(247,247,247)';
                article_p[i].style.color = 'rgb(45,49,61)';
            }
        }
    })


    //盒子小位移
    
    for(i = 0 ; i < aside_li.length ; i++){
        aside_li[i].addEventListener('mouseover',function(e){
            this.style.transform = 'translateY(-'+ 2 + 'px)';
            this.style.boxShadow = '2px 2px 10px 5px rgb(211,211,211)';
            e.stopPropagation()
        })
        aside_li[i].addEventListener('mouseout',function(e){
            this.style.transform = 'translateY(+'+ 2 + 'px)';
            this.style.boxShadow = 'none';
            e.stopPropagation()
        })
    }








})
   

